<style>
    .mailModal{
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <div>
        <Row v-if="this.modalType == 0">
        <ApplyListTemplate applyListClass="creditReward">
            <template slot="applyQueryForm">
                <Form ref="searchForm" :model="searchForm" inline :label-width="180" class="search-form rui-query-form">
                    <div class="applyQuerySearchRow">
                        <div class="applyQueryHead"></div>
                        <div class="applyQuerySearchItem">
                            <FormItem prop="typeId">
                                <div>
                                    <Select v-model="searchForm.typeId" @on-change="handleSearch" placeholder="奖励类型" prefix="ios-search" clearable >
                                        <Option v-for="item in typeList"  :value='item.rewardTypeid' :key="item.rewardTypeid">{{ item.typename }}
                                        </Option>
                                    </Select>
                                    <a :style="{display:'block',width:'40px',lineHeight: '24px',marginLeft: '16px'}"  @click="dropDown">
                                        {{dropDownContent}}
                                        <Icon :type="dropDownIcon"></Icon>
                                    </a>
                                </div>
                            </FormItem>
                        </div>
                    </div>
                    <div v-if="drop" class="applyQuerySearchMore table-card">
                        <div  class="applyQuerySearchMoreRow">
                            <div class="rui-query-form-item">
                                <Form-item label="合同激活时间起" >
                                    <DatePicker type="date" v-model="searchForm.startDate" format="yyyy-MM-dd" placeholder="请选择" style="width: 200px"></DatePicker>
                                </Form-item>
                            </div>
                            <div class="rui-query-form-item">
                                <Form-item label="合同激活时间止" >
                                    <DatePicker type="date" v-model="searchForm.endDate" format="yyyy-MM-dd" placeholder="请选择" style="width: 200px"></DatePicker>
                                </Form-item>
                            </div>
                            <div class="rui-query-form-item">
                                <Form-item label="状态" prop="status">
                                    <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                                        <Option v-for="item in statusList"  :value='item.code' :key="item.code">{{ item.name }}
                                        </Option>
                                    </Select>
                                </Form-item>
                            </div>
                        </div>
                        <div style="text-align: center">
                            <Button @click="handleSearch" type="primary">查询</Button>
                            <Button @click="handleReset">重置</Button>
                        </div>
                    </div>
                </Form>
            </template>
            <template slot="applyQueryBtn"></template>
            <template slot="applyQueryTable">
                <Table :loading="loading" :columns="columns" :data="data" sortable="custom" ref="table">
                    <template slot-scope="{ row, index }" slot="action">
                        <div class="btn-no-border">
                            <Button ghost style="margin-right:5px" type="primary" size="small" @click="show(row)">查看</Button>
                            <Button ghost style="margin-right:5px" type="primary" size="small" @click="determine(row)">确认</Button>
                            <Button ghost style="margin-right:5px" type="primary" size="small" @click="mail(row)">邮寄</Button>
                            <Button ghost style="margin-right:5px" type="primary" size="small" @click="account(row)">到账</Button>
                        </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="statusname">
                        <div>
                            <span v-if="row.status===1" style="color: #ff593f">{{row.statusname}}</span>
                            <span v-if="row.status===2" style="color: #58ff3e">{{row.statusname}}</span>
                            <span v-if="row.status===3" style="color: #ff4260">{{row.statusname}}</span>
                            <span v-if="row.status===4" style="color: #3c4cff">{{row.statusname}}</span>
                            <span v-if="row.status===5" style="color: #53ffcc">{{row.statusname}}</span>
                            <span v-if="row.status===6" style="color: #ffd1fd">{{row.statusname}}</span>
                            <span v-if="row.status===7" style="color: #f7ff55">{{row.statusname}}</span>
                            <span v-if="row.status===8" style="color: #ff000d">{{row.statusname}}</span>
                            <span v-if="row.status===9" style="color: #ff38cb">{{row.statusname}}</span>
                            <span v-if="row.status===10" style="color: #ea9bff">{{row.statusname}}</span>
                            <span v-if="row.status==='1'" style="color: #ff593f">{{row.name}}</span>
                            <span v-if="row.status==='2'" style="color: #58ff3e">{{row.name}}</span>
                            <span v-if="row.status==='3'" style="color: #ff4260">{{row.name}}</span>
                            <span v-if="row.status==='4'" style="color: #3c4cff">{{row.name}}</span>
                            <span v-if="row.status==='5'" style="color: #53ffcc">{{row.name}}</span>
                            <span v-if="row.status==='6'" style="color: #ffd1fd">{{row.name}}</span>
                            <span v-if="row.status==='7'" style="color: #f7ff55">{{row.name}}</span>
                            <span v-if="row.status==='8'" style="color: #ff000d">{{row.name}}</span>
                            <span v-if="row.status==='9'" style="color: #ff38cb">{{row.name}}</span>
                            <span v-if="row.status==='10'" style="color: #ea9bff">{{row.name}}</span>
                        </div>
                    </template>
                </Table>
            </template>
            <template slot="applyQueryPage">
                <Page :current="searchForm.pageNumber" :total="total"  :page-size="searchForm.pageSize"
                      @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                      size="small" show-total show-elevator show-sizer></Page>
            </template>
        </ApplyListTemplate>
        </Row>
        <Row v-if="this.modalType == 1">
            <Col>
                <Card>
                    <Row>
                        <Form  inline :label-width="120" style="border-bottom: 1px black solid">
                            <span style="font-size: 16px">查看贷额明细</span>
                            <Button @click="backPage" size="small" type="primary" style="float: right">返回</Button>
                        </Form>
                        <Form ref="loanDetailsForm" :model="loanDetailsForm" :label-width="160" style="margin-top: 5px">
                            <Row>
                                <i-col span="8">
                                    合同激活：
                                    <span>{{loanDetailsForm.startDate}}</span>至<span>{{loanDetailsForm.endDate}}</span>
                                </i-col>
                                <i-col span="8">
                                    经销商：
                                    <span>{{loanDetailsForm.distributor}}</span>
                                </i-col>
                                <i-col span="8">
                                    <Button @ size="small" type="primary" style="text-align: center" @click="exportFile(row)">导出</Button>
                                </i-col>
                            </Row>
                            <Row style="margin-top: 10px">
                                <i-col span="8">
                                    车辆价格：
                                    <span>{{loanDetailsForm.price}}</span>
                                </i-col>
                                <i-col span="8">
                                    贷款金额：
                                    <span>{{loanDetailsForm.dkMoney}}</span>
                                </i-col>
                                <i-col span="8">
                                    合同数量：
                                    <span>{{loanDetailsForm.count}}</span>
                                </i-col>
                            </Row>
                            <Row style="margin-top: 15px">
                                <i-col span="8">
                                    奖励金额：
                                    <span>{{loanDetailsForm.rewardMoney}}</span>
                                </i-col>
                                <i-col span="8">
                                    奖励类型名称：
                                    <span>{{loanDetailsForm.rewardName}}</span>
                                </i-col>
                                <i-col span="8">
                                    银行账号：
                                    <span>{{loanDetailsForm.bankAccount}}</span>
                                </i-col>
                            </Row>
                            <Row style="margin-top: 15px;margin-bottom: 5px">
                                <i-col span="8">
                                    案件类别名称：
                                    <span>{{loanDetailsForm.typeName}}</span>
                                </i-col>
                                <i-col span="8">
                                    状态：
                                    <span>{{loanDetailsForm.status}}</span>
                                </i-col>
                            </Row>
                        </Form>
                        <Row>
                            <Table :loading="loading" border :columns="columnsList" :data="dataList" sortable="custom" ref="table">
                            </Table>
                        </Row>
                        <Row type="flex" justify="end" class="page">
                            <Page :current="columnsFrom.pageNumber" :total="columnstotal"  :page-size="columnsFrom.pageSize"
                                  @on-change="changeColumnsPage" @on-page-size-change="changeColumnsPageSize" :page-size-opts="[10,20,50]"
                                  size="small" show-total show-elevator show-sizer></Page>
                        </Row>

                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="mailModalVisible" :mask-closable='false' :width="500"
               class="mailModal">
            <Form ref="mailForm" :model="mailForm" :label-width="110" :rules="mailFormValidate">
                <FormItem label="发票开具方名称" prop="dealername">
                    <Input v-model="mailForm.dealername" autocomplete="off"/>
                </FormItem>
                <FormItem label="发票号码" prop="receiptno">
                    <Input v-model="mailForm.receiptno" autocomplete="off"/>
                </FormItem>
                <FormItem label="快递单号" prop="expressno">
                    <Input v-model="mailForm.expressno" autocomplete="off"/>
                </FormItem>
                <FormItem label="发票金额" prop="receiptmoney">
                    <Input v-model="mailForm.receiptmoney" autocomplete="off"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelMail">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="mailSubmit()">提交</Button>
            </div>
        </Modal>
        <Modal :title="modalTitle" v-model="deterModalVisible" :mask-closable='false' :width="400"
               class="mailModal">
            <Form  :label-width="80">
                <FormItem>
                    <Button type="warning" @click="printing">打印</Button>
                    <Button type="primary" @click="determineCheck">确认(须有回执附件)</Button>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button icon="ios-cloud-upload-outline">选取文件</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import ApplyListTemplate from '_p/afs-apply/pages/common/ApplyListTemplate'
    import {
        getStatus,
        getTypeId,
        getCreditRewardList,
        confirmReceiveMoney,
        getContractList,
        confirmExpress,
    } from "../../api/credit-reward/creditRewardDefine";
    export default {
        name: "creditReward",
        components: { ApplyListTemplate },
        data(){
            return {
                drop: false,
                dropDownContent: "更多",
                dropDownIcon: "ios-arrow-down",
                loading: false,
                submitLoading:false,
                mailModalVisible: false,
                deterModalVisible:false,
                typeList:[],
                total: 0,
                columnstotal:0,
                statusList:[],
                modalType: 0,
                qaid:'',
                id:'',
                modalTitle:"",
                columnsFrom:{
                    pageNumber: 1,
                    pageSize: 10,
                },
                loanDetailsForm:{
                    startDate:'',
                    endDate:'',
                    distributor:'',
                    price:'',
                    dkMoney:'',
                    count:'',
                    rewardMoney:'',
                    rewardName:'',
                    bankAccount:'',
                    typeName:'',
                    status:''
                },
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    typeId: "",
                    status: "",
                    startDate: "",
                    endDate: ""
                },
                mailForm:{
                    receiptno:'',
                    expressno:'',
                    dealername:'',
                    receiptmoney:'',
                    qaid:'',
                    id:''
                },
                columns: [
                    {
                        title:'序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    },{
                        title: "状态",
                        key: "statusname",
                        key: "name",
                        align: "center",
                        minWidth: 80,
                        slot: "statusname",
                    },
                    {
                        title: "摊销奖励名称",
                        key: "typename",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "名称",
                        key: "title",
                        align: "center",
                        minWidth: 180,
                    },
                    {
                        title: "分类",
                        key: "categoryname",
                        align: "center",
                        minWidth: 140
                    },
                    {
                        title: "金额",
                        key: "money",
                        align: "center",
                        minWidth: 100
                    },
                    {
                        title: "开始时间",
                        key: "startdate",
                        align: "center",
                        minWidth: 120
                    },
                    {
                        title: "结束时间",
                        key: "enddate",
                        align: "center",
                        minWidth: 120
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 240,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
                columnsList:[
                    {
                        title: "客户姓名",
                        key: "customer",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "合同号",
                        key: "contractno",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "激活日期",
                        key: "activedate",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "车架号",
                        key: "vin",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "贷款金额",
                        key: "loanmoney",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "车价",
                        key: "carprice",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "奖励金额",
                        key: "money",
                        align: "center",
                        minWidth: 140,
                    },
                ],
                dataList:[],
                mailFormValidate:{
                    receiptno:[
                        {required: true, message: "请填写发票号码", trigger: "blur"}
                    ],
                    expressno:[
                        {required: true, message: "请填写快递单号", trigger: "blur"}
                    ],
                    receiptmoney:[
                        {required: true, message: "请填写发票金额", trigger: "blur"},
                        {type:'number', message:'应输入数字',
                            transform(value) {
                                return Number(value);
                            }
                        },
                    ],
                    dealername:[
                        {required: true, message: "请填写发票开具方名称", trigger: "blur"}
                    ]
                },
            }
        },
        methods:{
            init() {
                this.queryData();
            },
            //查询按钮操作
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.queryData();
            },
            //多条件分页查询
            queryData(pageNumber = 1, pageSize = 10) {
                if(this.searchForm.startDate>this.searchForm.endDate){
                    this.$Message.error("时间范围错误");
                }else{
                    let params = {
                        page: pageNumber,
                        pagesize: pageSize,
                        typeId: this.searchForm.typeId,
                        startDate: this.searchForm.startDate,
                        endDate: this.searchForm.endDate,
                        status: this.searchForm.status,
                    };
                    getCreditRewardList(params).then(res => {
                        if (res.code === "0000") {
                            this.data = res.data.records;
                            this.total = res.data.total;
                        }
                    });
                }
            },
            show(row){
                this.modalType=1;
                this.id=row.id;
                this.loanDetailsForm.startDate=row.startdate;
                this.loanDetailsForm.endDate=row.enddate;
                this.loanDetailsForm.distributor=row.dealername;
                this.loanDetailsForm.bankAccount=row.bankaccount;
                this.loanDetailsForm.typeName=row.categoryname;
                this.loanDetailsForm.status=row.statusname;
                this.loanDetailsForm.rewardName=row.typename;
                this.loanDetailsForm.rewardMoney=row.money;
                this.queryDetail();
            },
            queryDetail(pagenumber = 1, pagesize = 10){
                let params = {
                    page: pagenumber,
                    pagesize: pagesize,
                    id: this.id
                };
                getContractList(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.dataList = res.data.records;
                        this.columnstotal = res.data.total;
                        let param={
                            page:1,
                            pagesize:this.columnstotal,
                            id:this.id
                        };
                        getContractList(param).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                let dkMoney=0;
                                let price=0;
                                for (let i=0;i<res.data.records.length;i++){
                                    dkMoney+=parseInt(res.data.records[i].loanmoney);
                                    price+=parseInt(res.data.records[i].carprice);
                                }
                                this.loanDetailsForm.count=res.data.total;
                                this.loanDetailsForm.dkMoney=dkMoney;
                                this.loanDetailsForm.price=price;
                            }
                        });
                    }
                });
            },
            backPage(){
                this.modalType=0;
            },
            determine(row){
                this.deterModalVisible=true;
            },
            printing(){
                alert("打印");
            },
            determineCheck(){
                alert("确认上传回执");
            },
            mail(row){
                this.modalType = 0;
                this.modalTitle = "邮寄信息";
                this.$refs.mailForm.resetFields();
                this.qaid=row.id;
                this.mailModalVisible = true;
            },
            mailSubmit(){
                this.$refs.mailForm.validate((valid) => {
                    if (valid) {
                        this.mailForm.dealer=this.dealer;
                        this.mailForm.readonly="false";
                        let expresslist=[];
                        let express={
                            id:"",
                            receiptno:this.mailForm.receiptno,
                            expressno:this.mailForm.expressno,
                            dealer:this.mailForm.dealername,
                            readonly:false,
                            receiptmoney:this.mailForm.receiptmoney
                        };
                        expresslist.push(express);
                        let param={
                            qaid:this.qaid,
                            expresslist:expresslist
                        };

                        confirmExpress(param).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                if(res.data.code==="0"){
                                    this.$Message.success(res.data.message);
                                }else{
                                    this.$Message.error(res.data.message);
                                }
                            }
                        });
                        this.mailModalVisible = false;
                    }else {
                        this.$Message.error('请补全信息');
                        this.mailModalVisible = true;
                    }
                })
            },
            cancelMail(){
                this.$refs.mailForm.resetFields();
                this.mailModalVisible = false;
            },
            account(row){
                this.$Modal.confirm({
                    title: "提示",
                    content: "你确定贷额奖励到账了吗?",
                    onOk: () => {
                        let param={
                            qasubid:row.id
                        }
                        this.operationLoading = true;
                        confirmReceiveMoney(param).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                if(res.data.code===0){
                                    this.$Message.success(res.data.message);
                                }else{
                                    this.$Message.error(res.data.message);
                                }
                                this.queryData();
                            }
                        });
                    }
                });
            },
            //改变当前页码
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.queryData(v, this.searchForm.pageSize);
            },
            //改变页码数量
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.queryData(this.searchForm.pageNumber, v);
            },
            //改变当前页码
            changeColumnsPage(v) {
                this.columnsFrom.pageNumber = v;
                this.queryDetail(v,this.columnsFrom.pageSize);
            },
            //改变页码数量
            changeColumnsPageSize(v) {
                this.columnsFrom.pageSize = v;
                this.queryDetail(1,this.columnsFrom.pageNumber);
            },
            //重置表单数据,并重新加载数据
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                this.searchForm.status = "";
                this.searchForm.typeId = "";
                this.queryData();
            },
            gettypeList() {
                let params=null;
                getTypeId(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.typeList=res.data.data;
                    }
                });
            },
            exportFile(){
                // let params={
                //     id:this.id
                // };
                // exportFile(params).then(res => {
                //     this.operationLoading = false;
                //     if (res.code === "0000") {
                //         console.log("导出成功");
                //     }
                // });
                alert("导出");
            },
            getStatusList() {
                let params=null;
                getStatus(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.statusList=res.data.result.data;
                    }
                });
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "更多";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
        },
        mounted() {
            this.init();
            this.gettypeList();
            this.getStatusList();
        }
    }
</script>

